

/**
 *
 * @param {*} ele    运动的元素
 * @param {*} key    运动的css属性
 * @param {*} end    运动的终点值
 * @param {string} [type="slow"]   运动的方式("slow","normal","fast")
 * @param {*} callback  回调函数,每次运动结束之后执行
 */
function animate(ele, key, end, type = "slow", callback) {
    // var end = 1000;

    // cur = ele.offsetLeft;  // 当前位置 => 起始位置
    cur = getVal(ele, key);  // 当前位置 => 起始位置
    end = parseFloat(end); // 有单位 => 去单位 

    var speed = 0;

    // 将计时器的编号绑定到运动的元素上 => 对应元素的timer属性  清除计时器的编号
    clearInterval(ele.timer);

    ele.timer = setInterval(function () {

        if (type == "normal") {
            // 匀速  => 不受计时器影响
            if (end > cur) { //  0 -> 1000
                speed = 40;
            } else if (end < cur) { // 1000 -> 0
                speed = -40;
            } else {
                speed = 0;
            }

        } else if (type == "fast") {
            // 加速运动 => 让速度随时间推移  => 增加
            if (end > cur) { //  0 -> 1000
                speed += 2;
            } else if (end < cur) { // 1000 -> 0
                speed -= 2;
            } else {
                speed = 0;
            }
            // console.log(speed);
        } else if (type == "slow") {
            // 缓冲运动 => 每次走剩余的1/n  => n缓冲因子(一般8-12)
            // 问题: 虽然速度递减 => 根本到不了终点(0.0004999999999995453)   => 速度不满1  => 取1
            // 正向 0-1000 =>  0.00049999  => 向上取值 1
            // 反向 1000-0 =>  -0.00049999 => 向下取值 -1

            if (end > cur) { //  0 -> 1000
                //    (终点值 - 当前位置)/ n缓冲因子  =>   每次走剩余的1/10
                speed = (end - getVal(ele, key)) / 10;
                speed = Math.ceil(speed);
            } else if (end < cur) { // 1000 -> 0
                speed = (end - getVal(ele, key)) / 10;
                speed = Math.floor(speed);
            } else {
                speed = 0;
            }
        }
        // console.log(speed);

        if (Math.abs(getVal(ele, key) - end) <= Math.abs(speed)) { //到达终点   100 -> 1000
            clearInterval(ele.timer);
            ele.style[key] = end + "px";  // 如果超出强制到达终点

            if (callback && typeof callback === "function") {
                callback();
            }


        } else { // 没有到达终点再跑一次
            // 每次ele 相较于当前位置 向前/向后 加上对应的speed
            ele.style[key] = (getVal(ele, key) + speed) + "px";
        }

    }, 10);
}

function getVal(ele, key) {
    return parseFloat(getStyle(ele, key));
}

function getStyle(ele, key) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(ele)[key];
    } else {
        return ele.currentStyle[key];
    }
}

